<template>
  <grid-layout>
    <template #left>
      <info-title>基础信息</info-title>
      <text-row-tight label="名称" :text="data.name" />
      <text-row-tight label="地址" :text="data.address" />
      <text-row-tight label="类型" :text="data.type_name" />
      <text-row-tight label="管理者" :text="data.manager_name" />
      <text-row-tight label="管理者联系方式" :text="data.manager_phone" />
    </template>
    <template #right>
      <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
        <info-title style="flex: none">清单</info-title>
        <common-table
          :api="api"
          :columns="columns"
          :pagination="false"
          style="flex: auto; height: auto; min-height: 0; width: 100%"
        ></common-table>
      </div>
    </template>
  </grid-layout>
</template>

<script>
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import CommonTable from '@gis/lib/components/antd-table/index.vue';
import { getGisEntityDetailsList } from '@gis/lib/api';
export default {
  name: 'source-list-table',
  components: { GridLayout, CommonTable },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      layout: [
        { name: 'left', colSpan: 6 },
        { name: 'right', colSpan: 18 },
      ],
      columns: [
        {
          title: '物资名称',
          dataIndex: 'name',
        },
        {
          title: '物资类别',
          dataIndex: 'type',
          width: 180,
        },
        {
          title: '数量',
          dataIndex: 'number',
          width: 120,
        },
        {
          title: '计量单位',
          dataIndex: 'units',
          width: 120,
          align: 'center',
        },
      ],
    };
  },
  methods: {
    async api(params = {}) {
      if (!this.data || !this.data.id) {
        return;
      }
      params = Object.assign({}, params, { gis_id: this.data.id });
      const res = await getGisEntityDetailsList(params);
      return { data: (res && res.data) || [], total: 0 };
    },
  },
};
</script>

<style scoped></style>
